<template>
    <div class="w">
        <div class="w" @click="clickShowDevInfo">
            <slot>测试内容</slot>
        </div>
        <van-dialog v-model:show="showDevBox" title="函数调试" :show-cancel-button="false" width="98%">
            <div class="fn-box box-b p-l4 p-r4" v-for="(key, i) in keyList" :key="i">
                <div class="w m-b4 f-s">
                    <el-button class="w box-b" type="primary" @click="executeMethod(key)">
                        <span class="over-h" v-html="methods[key].label">
                        </span>
                    </el-button>
                </div>
                <div class="w tip-p b-p2" v-if="methods[key].result">
                    {{ methods[key].result }}
                </div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
export default {
    name: 'appMethodTest',
    data() {
        return {
            nativeJS: this.$native,
            clickCount: 0,
            canDevTimeId: 0,

            methods: {
                isConnection: {
                    fn: () => {
                        return this.nativeJS.isConnection();
                    },
                    label: "isConnection",
                    result: null,
                },
                webViewReload: {
                    fn: () => {
                        this.nativeJS.webViewReload();
                    },
                    label: "webViewReload",
                    result: null,
                },
                showNotify: {
                    fn: () => {
                        return this.nativeJS.showNotify("标题", new Date() + "这是一段内容文字");
                    },
                    label: "showNotify",
                    result: null,
                },
                getSystemInfo: {
                    fn: () => {
                        return this.nativeJS.getSystemInfo();
                    },
                    label: "getSystemInfo",
                    result: null,
                },
                playPromptSound: {
                    fn: () => {
                        return this.nativeJS.playPromptSound();
                    },
                    label: "playPromptSound",
                    result: null,
                },
                playPromptSoundUrl: {
                    fn: () => {
                        return this.nativeJS.playPromptSound(
                            "http://m10.music.126.net/20230323085042/2a1bf8479d212f75620ea34329098599/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3"
                        );
                    },
                    label: "'http://m10.music.126.net/20230323085042/2a1bf8479d212f75620ea34329098599/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3'<br/>playPromptSound(url)",
                    result: null,
                },
                cancelPromptSound: {
                    fn: () => {
                        return this.nativeJS.cancelPromptSound();
                    },
                    label: "cancelPromptSound()",
                    result: null,
                },
                playVibrator: {
                    fn: () => {
                        return this.nativeJS.playVibrator(
                            true,
                            [3000, 1500, 3000, 1500, 1500, 1200, 1200, 1100]
                        );
                    },
                    label: "playVibrator",
                    result: null,
                },
                cancelVibrator: {
                    fn: () => {
                        return this.nativeJS.cancelVibrator();
                    },
                    label: "cancelVibrator",
                    result: null,
                },
            }
        }
    },
    computed: {
        keyList() {
            return Object.keys(this.methods);
        },
        showDevBox: {
            get() {
                return this.clickCount >= 8;
            },
            set(val) {
                this.clickCount = 0;
            }
        }
    },
    methods: {
        clickShowDevInfo() {
            this.clickCount++;
            clearTimeout(this.canDevTimeId);
            this.canDevTimeId = setTimeout(() => {
                if (!this.showDevBox) {
                    this.clickCount = 0
                }
            }, 2000);

        },
        executeMethod(key) {
            let result = this.methods[key].fn();
            if (typeof result === 'object') {
                result = JSON.stringify(result);
            }
            this.$set(this.methods[key], 'result', result);
        }
    }
}
</script>

<style lang="scss" scoped></style>